<template>
	<view class="page flex flex-direction">
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText">返回</block>
		</cu-custom>
		<view class="flex-sub" style="overflow-y: scroll;">
			<view class="header bg-blue flex flex-direction align-center" style="padding: 0 16px 16px 16px;">
				<view class="text-xxl text-white text-bold" style="letter-spacing: 5px;padding-bottom: 5px;border-bottom: 2px solid #f0f0f0;">
					隐患列表
				</view>
				<view class="flex flex-wrap margin-top-xs">
					<view class="flex align-center text-xs margin-top-xs " v-for="(item,index) in statusArray" :key="index">
						<view class="cu-tag line-white" style="padding: 5px 10px;border-radius: 20px;">
							{{item}}
						</view>
						<view style="width: 30px;border-top: 1px dotted #f0f0f0;height: 1px;" v-if="index!=statusArray.length-1">
						</view>
					</view>
				</view>
			</view>

			<!-- 隐患列表 -->
			<view class="margin bg-white shadow radius">
				<view class="cu-list divider padding-lr">
					<view class="cu-item padding-tb" v-for="(item,index) in dangerList" :key="index" @tap="clickDangerItem"
					 :data-index="index">
						<view class="cf">
							<view class="fl cu-tag bg-blue text-lg">
								{{item.defectSource}}
							</view>
							<view class="fr">
								{{item.processStep}}
							</view>
						</view>

						<view class="text-lg text-black text-bold margin-top-xs">
							{{item.projectName}}
						</view>
						<view class="margin-top-xs" v-if="item.title">
							检查标题：{{item.title}}
						</view>

						<view class="margin-top-xs" v-if="item.subject">
							检查内容：{{item.subject}}
						</view>

						<view class="margin-top-xs text-red" style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;" v-if="item.contentDesc">
							隐患描述：{{item.contentDesc}}
						</view>
						<view class="margin-top-xs cf">
							<view class="fl">
								{{item.reportEmployeeName}}
							</view>
							<view class="fr">
								{{item.reportTime|formatTime}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 加载更多 -->
			<load-footer ref="loadMore" class="margin" :eventClick="clickLoadMore"></load-footer>
		</view>
	</view>
</template>

<script>
	import api from '../../util/apis/api-patrol.js'
	import ui from '../../util/ui.js'

	import loadFooter from '../../components/loading-footer/loading-footer.vue'

	const PAGE_SIZE = 10;
	let that = null;
	export default {
		filters: {
			formatTime: function(time) {
				let date = new Date(time);
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				month = (month < 10 ? '0' + month : month);
				let day = date.getDate();
				day = (day < 10 ? '0' + day : day);
				let hour = date.getHours();
				hour = (hour < 10 ? '0' + hour : hour);
				let min = date.getMinutes();
				min = (min < 10 ? '0' + min : min);
				let sec = date.getSeconds();
				sec = (sec < 10 ? '0' + sec : sec);
				return year + '-' + month + '-' + day + ' ' + hour + ':' + min + ':' + sec;
			}
		},
		components: {
			loadFooter
		},
		data() {
			return {
				statusArray: ['工程检查', '检查处理', '检查审核', '任务分发', '维修养护', '成果审核', '隐患已处理'],
				currentPageNo: 1,
				dangerList: []
			}
		},
		onLoad() {
			that = this;
		},
		mounted() {
			// 获取数据
			that.currentPageNo = 1;
			that.getDangerList();
		},
		methods: {
			/**
			 * 点击列表事件
			 * @param {Object} e
			 */
			clickDangerItem: function(e) {
				let index = e.currentTarget.dataset.index;
				let danger = that.dangerList[index];
				// 跳转到详情页面
				danger = encodeURIComponent(JSON.stringify(danger));
				uni.navigateTo({
					url: './patrol_danger_info?danger=' + danger
				})
			},
			/**
			 * 点击加载更多的事件
			 * @param {Object} e
			 */
			clickLoadMore: function(e) {
				that.getDangerList();
			},
			// ——————————————————————api数据方法————————————————————————
			/**
			 * 
			 */
			getDangerList: function() {
				that.$refs.loadMore.loading();
				api.getDangerList(that.currentPageNo, 10)
					.then(res => {
						let list = res.list;
						// 处理load footer
						if (list.length == PAGE_SIZE) {
							that.currentPageNo += 1;
							that.$refs.loadMore.loadComplete();
						} else {
							that.$refs.loadMore.loadEnd();
						}
						// 处理数组
						let array = that.dangerList;
						let newArray = [...array, ...list]
						that.dangerList = newArray;
					})
					.finally(() => {

					});
			}
		}
	}
</script>

<style>
</style>
